<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="任务编码" prop="taskNo" label-width="90px">
        <el-input
          v-model="queryParams.taskNo"
          placeholder="请输入任务编码"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="发起方名称" prop="receiverCompanyName" label-width="90px">
        <el-input
          v-model="queryParams.receiverCompanyName"
          placeholder="请输入发起方名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="开票状态" prop="status">
        <el-select v-model="queryParams.status">
          <el-option :value="0" label="待开票"></el-option>
          <el-option :value="1" label="待验收"></el-option>
          <el-option :value="2" label="完成"></el-option>
          <el-option :value="3" label="驳回"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开票类型" prop="invoiceType">
        <el-select v-model="queryParams.invoiceType">
          <el-option :value="2" label="普票"></el-option>
          <el-option :value="1" label="专票"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>

    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['invoice:invoice:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table ref="table" v-loading="loading" :data="invoiceList" >
      <el-table-column label="任务编码" align="center" prop="taskNo" show-overflow-tooltip min-width="150"/>
      <el-table-column label="任务名称" align="center" prop="taskName" show-overflow-tooltip min-width="150"/>
      <el-table-column label="发起方" align="center" prop="receiverCompanyName" min-width="200"/>
      <el-table-column label="税额" align="center" prop="taxAmount" show-overflow-tooltip min-width="120"/>
      <el-table-column label="不含税金额" align="center" prop="taskAmount" show-overflow-tooltip min-width="120"/>
      <el-table-column label="价税合计" align="center" prop="invoiceAmount" show-overflow-tooltip min-width="120"/>

      <el-table-column label="开票类型" align="center" prop="isInvoicing" width="100">
        <template slot-scope="{ row }">
          <el-tag style="cursor: pointer" v-if="row.invoiceType === 1">专票</el-tag>
          <el-tag style="cursor: pointer" type="success" v-else-if="row.invoiceType === 2">普票</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="开票类目" align="center" prop="invoiceCatagory" min-width="220">
        <template slot-scope="{ row }">
           <span v-if="organizationType === 1">
              信息技术服务*信息技术服务费
          </span>
          <span v-else-if="organizationType === 2">
            现代服务*推广服务费
          </span>
          <span v-else-if="organizationType === 3">
            {{ row.invoiceCatagory }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="发票文件" align="center" prop="invoiceFile" width="100">
        <template slot-scope="{ row }">
          <el-link :href="baseUrl+row.invoiceFile" v-if="row.invoiceFile" :underline="false" target="_blank">
            <el-button type="text" size="mini">查看发票</el-button>
          </el-link>
        </template>
      </el-table-column>

      <el-table-column label="开票状态" align="center" prop="isInvoicing" width="100">
        <template slot-scope="{ row }">
          <el-tag style="cursor: pointer" type="warning" v-if="row.status === 0">开票中</el-tag>
          <el-tag style="cursor: pointer" type="success" v-else-if="row.status === 1">待验收</el-tag>
          <el-tag style="cursor: pointer" v-else-if="row.status === 2">完成</el-tag>
          <el-popover
            placement="bottom"
            title=""
            width="200"
            trigger="click"
            :content="row.reason">
            <el-tag slot="reference" v-if="row.status === 3" style="cursor: pointer" type="danger">驳回</el-tag>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="申请时间" align="center" prop="createTime" width="180"></el-table-column>
      <el-table-column label="开票时间" align="center" prop="invoiceTime" width="180" />
      <el-table-column fixed="right" width="150" label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            v-if="scope.row.status !== 2 "-->
<!--            @click="handleInvoice(scope.row)"-->
<!--          >开票</el-button>-->
          <el-button
            size="mini"
            type="text"
            @click="handleDetail(scope.row)"
          >开票</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />


    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" title="开票" :visible.sync="invoiceOpen" width="500px" append-to-body>
      <el-form ref="settlementForm" v-loading="invoiceLoading" :model="form" label-width="100px">
        <el-form-item label="税额/元">
          {{ formattedTotal(form.taxAmount) }}
        </el-form-item>
        <el-form-item label="不含税金额/元">
          {{ formattedTotal(form.taskAmount) }}
        </el-form-item>
        <el-form-item label="价税合计/元">
          {{ formattedTotal(form.invoiceAmount) }}
        </el-form-item>
        <el-form-item label="发起方">
          {{ form.receiverCompanyName }}
        </el-form-item>
        <el-form-item label="纳税识别号">
          {{ form.receiverCreditCode }}
        </el-form-item>
        <el-form-item label="开票类型">
          <el-tag style="cursor: pointer" v-if="form.invoiceType === 1">专票</el-tag>
          <el-tag style="cursor: pointer" type="success" v-else-if="form.invoiceType === 2">普票</el-tag>
        </el-form-item>


        <el-form-item label="开票类目">
          <span v-if="organizationType === 1">
              信息技术服务*信息技术服务费
          </span>
          <span v-else-if="organizationType === 2">
            现代服务*推广服务费
          </span>
          <span v-else-if="organizationType === 3">
            {{ form.invoiceCatagory }}
          </span>
        </el-form-item>
        <el-form-item label="发票" prop="invoiceFile">
          <FileUpload :file-type='["pdf","zip","png", "jpg", "jpeg"]' v-model="form.invoiceFile" :limit="1"
          ></FileUpload>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="invoiceLoading" type="primary" @click="subInvoice">立即提交</el-button>
        <el-button :loading="invoiceLoading" @click="invoiceOpen = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-drawer :wrapperClosable="false" :close-on-press-escape="false" destroy-on-close title="开票" :visible.sync="detailOpen" size="70%" append-to-body>
      <el-descriptions title="" border>

        <el-descriptions-item label="发起方" >{{ form.receiverCompanyName }}</el-descriptions-item>
        <el-descriptions-item label="纳税识别号" >{{ form.receiverCreditCode }}</el-descriptions-item>
        <el-descriptions-item label="开票类目">
          <span v-if="organizationType === 1">
              信息技术服务*信息技术服务费
          </span>
          <span v-else-if="organizationType === 2">
            现代服务*推广服务费
          </span>
          <span v-else-if="organizationType === 3">
            {{ form.invoiceCatagory }}
          </span>

        </el-descriptions-item>

        <el-descriptions-item label="税额/元">{{ formattedTotal(form.taxAmount) }}</el-descriptions-item>
        <el-descriptions-item label="不含税金额/元">{{ formattedTotal(form.taskAmount) }}</el-descriptions-item>
        <el-descriptions-item label="价税合计/元">{{ formattedTotal(form.invoiceAmount) }}</el-descriptions-item>


        <el-descriptions-item label="发票">
          <el-link :href="baseUrl+form.invoiceFile" v-if="form.invoiceFile" :underline="false" target="_blank">
            <el-button type="text" size="mini">查看发票</el-button>
          </el-link>
        </el-descriptions-item>

      </el-descriptions>
      <el-form :model="invoiceTaskQuery" ref="queryFormListInvoiceTask" class="invoiceTaskQueryClass" size="small" :inline="true" label-width="68px">
<!--        <el-form-item label="任务" prop="taskId">-->
<!--          <el-select-->
<!--            v-model="invoiceTaskQuery.taskId"-->
<!--            filterable-->
<!--            remote-->
<!--            clearable-->
<!--            reserve-keyword-->
<!--            placeholder="请输入任务名称"-->
<!--            :remote-method="handleTaskRemote"-->
<!--            :loading="taskLoading"-->
<!--          >-->
<!--            <el-option-->
<!--              v-for="item in taskOptions"-->
<!--              :key="item.id"-->
<!--              :label="item.taskName"-->
<!--              :value="item.id"-->
<!--            >-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->

        <el-form-item label="任务编码" prop="taskNo" label-width="90px">
          <el-input
            v-model="invoiceTaskQuery.taskNo"
            placeholder="请输入任务编码"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getListInvoiceTask">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQueryListInvoiceTask">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <el-button
          type="primary"
          plain
          icon="el-icon-more-outline"
          size="mini"
          v-if="form.status !== 2 "
          @click="handleInvoice(form)"
        >开票</el-button>
      </el-row>

      <el-table v-loading="loading" :data="invoiceTaskList">
        <el-table-column label="任务编码" align="center" prop="task.taskNo" min-width="180"/>
        <el-table-column label="任务名称" align="center" prop="task.taskName" min-width="180"/>
        <el-table-column label="分润金额" align="center" prop="separate.separateAmount" min-width="150"/>
        <el-table-column label="发票类型" align="center" prop="invoice.invoiceType" width="120">
          <template slot-scope="{ row }">
            {{row.invoice.invoiceType===1?'专票':row.invoice.invoiceType===2?'普票':''}}
          </template>
        </el-table-column>
        <el-table-column label="发票类目" align="center" prop="invoice.invoiceCatagory" min-width="180">
          <template slot-scope="{ row }">
            <span v-if="organizationType === 1">
             信息技术服务*信息技术服务费
          </span>
            <span v-else-if="organizationType === 2">
            现代服务*推广服务费
          </span>
            <span v-else-if="organizationType === 3">
            {{ row.invoiceCatagory }}
          </span>
          </template>
        </el-table-column>
        <el-table-column label="开票时间" align="center" prop="invoice.invoiceTime" width="180" />
      </el-table>
      <pagination
        v-show="invoiceTaskTotal>0"
        :total="invoiceTaskTotal"
        :page.sync="invoiceTaskQuery.pageNum"
        :limit.sync="invoiceTaskQuery.pageSize"
        @pagination="getListInvoiceTask"
      />

    </el-drawer>

  </div>
</template>
<script>
import 'splitpanes/dist/splitpanes.css'
import { Pane, Splitpanes } from 'splitpanes'
import { listTaxMarket } from '@/api/tax/taxMarket'
import { listInvoice, submitPayslipInvoice } from '@/api/invoice/invoice'
import { listTask } from '@/api/system/task'
import store from '@/store'
import { listTsl } from '@/api/system/tax_territory'
import { listInvoiceTask } from '@/api/invoice/invoiceTask'
export default {
  name: 'pending',
  components: { Splitpanes, Pane },
  data(){
    return{
      loading:false,
      total:0,
      tslList:[],
      showSearch:true,
      detailOpen:false,
      invoiceOpen:false,
      taskLoading:false,
      invoiceLoading:false,
      invoiceList:[],
      taskOptions:[],
      queryParams:{
        pageNum: 1,
        pageSize: 10,
        taskNo:null,
        isInvoicing:null,
        invoiceType:null,
        receiverCompanyName:null,
      },
      queryParamsTslMarket: {
        type:1,
        name:null,
        pageNum: 0,
        maxPageNum:1,
        pageSize: 10,
        auditStatus: 2,
        cooperateAuditStatus: 2,
      },
      invoiceTaskQuery:{
        pageNum: 1,
        pageSize: 10,
        invoiceId:null,
      },
      tslName:null,
      baseUrl: process.env.VUE_APP_BASE_API,
      form:{},
      invoiceTaskTotal:0,
      invoiceTaskList:[],
      roleGroup: store.getters.roles,
      organizationType: store.getters.organizationType,
    }
  },
  mounted() {
    this.getList()
  },
  methods:{
    getList() {
      this.loading = true
      listInvoice(this.queryParams).then(response => {
        this.invoiceList = response.rows
        this.total = response.total
        this.loading = false
      }).catch(() => {
        this.loading = true
      })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },

    handleDetail(row){
      this.detailOpen = true
      if (row.id){
        this.invoiceTaskQuery.invoiceId = row.id
      }
      this.form = row
      this.getListInvoiceTask();
    },

    getListInvoiceTask(){
      listInvoiceTask(this.invoiceTaskQuery).then(res=>{
        this.invoiceTaskList = res.rows
        this.invoiceTaskTotal = res.total
      })
    },

    resetQueryListInvoiceTask() {
      this.invoiceTaskQuery.pageNum = 1;
      this.resetForm("queryFormListInvoiceTask");
      this.getListInvoiceTask();
    },

    handleInvoice(row) {
      this.form = row
      this.invoiceOpen = true
    },

    subInvoice() {
      if (!this.form.invoiceFile){
        this.$message.warning("请上传发票");
        return
      }
      this.$modal.confirm('确定要提交这些任务吗？').then(() => {
        this.invoiceLoading = true
        submitPayslipInvoice(this.form).then(res => {
          this.invoiceLoading = false
          this.invoiceOpen = false
          this.getList()
        }).catch(() => {
          this.invoiceLoading = false
        })
      })

    },

    formattedTotal(amount) {
      const formatter = new Intl.NumberFormat('zh-CN', {
        style: 'currency',
        currency: 'CNY',
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      })

      return formatter.format(amount)
    },
    /** 导出按钮操作 */
    handleExport() {

      this.download('invoice/invoice/export', {
        ...this.queryParams
      }, `待开票_${new Date().getTime()}.xlsx`)
    }
  },
  watch: {

  }
}
</script>

<style lang="scss" scoped>
.infinite-list-wrapper {
  max-height: calc(100vh - 180px);
}
.invoiceTaskQueryClass{
  margin-top: 20px;
}
::v-deep .el-drawer__body{
  padding: 0 20px;
}
</style>
